<template>
  <div class="card-list">
      <!-- 标题 -->
      <header class="story-title">
          <div class="s-t-left">
              <i class="iconfont icon-donghua"></i>
              <div>{{getName()}}</div>
          </div>
          <div class="s-t-right">
              <div class="btn-change">
                  <i class="iconfont icon-huanyihuan"></i>
                  <span @click="changeIt">&nbsp;换一换</span>
              </div>
              <div class="more">
                  <a href="javascript:;">
                      更多
                      <i class="iconfont icon-arrow-right"></i>
                  </a>
              </div>
          </div>
      </header>

      <!-- 楼层内容 -->
      <div class="storey-content">
          <div 
            class="s-c-item"
            v-for="(item,i) in maindataItem"
            :key="i"
            @click="jumpPath(item.title)">
              <!-- 图片 -->
              <div class="item-pic">
                  <img src="" alt="">
                  <div class="count">
                    <i class="iconfont icon-bofangliang1"></i>
                    {{ tenThousand(item.stat.view) }}
                    <i class="iconfont icon-dianzan"></i>
                    {{ tenThousand(item.stat.like) }}
                  </div>
                  <!-- 播放时长 -->
                  <div class="duration">
                    {{ timeHandle(item.duration) }}
                  </div>
              </div>
              <!-- 标题 -->
              <div class="item-title">
                  <a href="#">item.title</a>
              </div>
              <!-- up主 -->
              <div class="item-up">
                  <a href="#">
                      <i class="iconfont icon-icon_bilibili-circle"></i>
                      {{item.owner.name}}
                  </a>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
    export default {
        name:'CardList',
        props:{
            maindataItem:{
                type:Array,
                default() {
                    return [];
                }
            },
            mdnameItem:{
                type:String,
                default:"",
            },
        },
        data() {
            return {};
        },
        created() {
            
        },
        mounted() {
            this.getName();
        },
        computed:{
            // 计算数量过万就转换
            tenThousand(){
                // 是属性不是方法，所以使用函数返回
                return function(count){
                    if(count >= 100000000){
                        return (count / 100000000).toFixed(2)+'亿';
                    }
                    return count >= 10000 ? (count /10000).toFixed(2)+'万' : count;
                };
            },
        },
        methods: {
            // 获取标题名字
            getName(){
                // 如果maindataItem里面有tname这个属性，就return true取反
                // every() 如果数组中检测到有一个元素不满足时，整个表达式返回false，且其余的元素不会再进行检测
                if(this.maindataItem.every((item) => !("tname" in item))) {
                    return;
                }
                return this.maindataItem[0].tname;
            },
            // 点击换一换
            changeIt(){
                this.$bus.$emit("changeList",this.mdnameItem);
            },

            // 处理时间

            // 点击跳转
            jumpPath(keyword){
                this.$router.push(`/search?keyword=${keyword}`);
            },
        },
    }
</script>

<style scpoed>
    .card-list {
        width: 100%;
        font: 12px Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB,
    Heiti SC, WenQuanYi Micro Hei, sans-serif;
    }
    /* 楼层标题区域 */
    .storey-title {
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }
    .s-t-left {
        display: flex;
        align-items: center;
        font-size: 20px;
        cursor: pointer;
    }
    .s-t-right {
        display: flex;
        justify-content: space-around;
        align-items: center;
        text-align: center;
        width: 15%;
        font-size: 12px;
    }
    .s-t-right .btn-change {
        flex:1;
        margin-right:5px;
        padding:2px 5px;
        border-radius: 2px;
        border:1px solid #ccc;
        cursor: pointer;
    }
    .btn-change:hover {
        background: #f5f5f5;
    }
    .s-t-right more{
        padding: 2px 5px;
        border-radius: 2px;
        border: 1px solid #ccc;
    }

    /* 楼层内容区域 */
    .storey-context {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .s-c-item {
        width: 19%;
        margin-bottom: 10px;
    }
    .item-pic {
        position: relative;
        width: 100%;
        max-height: 116px;
        border-radius: 4px;
        overflow: hidden;
    }
    .item-pic img {
        display: block;
        width: 100%;
    }
    .item-pic .count {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 12px;
        padding: 3px 5px;
        color: #fff;
        background-image: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.6),
            rgba(119, 119, 119, 0.1)
        );
        width: 100%;
        /* 一行显示 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
    }
    .duration {
        position: absolute;
        right: 0;
        top: 0;
        padding: 3px 5px;
        color: #fff;
        background-image: linear-gradient(
            to left bottom,
            rgba(0, 0, 0, 0.6),
            rgba(255, 255, 255, 0.1)
        );
        border-bottom-left-radius: 5px;
    }
    .item-title {
        font-size: 14px;
        height: 21%;
        margin-top: 5px;
        margin-bottom: 10px;
         /* 两行显示 */
        background-image: linear-gradient(
            to left bottom,
            rgba(0, 0, 0, 0.6),
            rgba(255, 255, 255, 0.1)
        );
        color: #4d4d4d;
    }
    .item-up {
        padding-left: 2px;
    }
    .item-up a {
        font-size: 12px;
        color: #999;
    }
</style>